<template>
  <div 
    class="flexible-nav"
    :style="containerStyle"
  >
    <!-- 导航项容器 -->
    <ul 
      class="nav-list"
      :class="{ 'vertical': direction === 'vertical' }"
      :style="listStyle"
    >
      <li 
        v-for="(item, index) in items" 
        :key="index"
        class="nav-item"
        :style="itemStyle"
        @click="handleItemClick(index, item)"
      >
        <!-- 导航项内容 -->
        <a 
          v-if="item.url" 
          :href="item.url" 
          :target="item.target || '_self'"
          :style="textStyle"
        >
          {{ item.label }}
        </a>
        <span v-else :style="textStyle">
          {{ item.label }}
        </span>
        
        <!-- 激活状态指示器 -->
        <div 
          v-if="activeIndex === index && showIndicator"
          class="active-indicator"
          :style="indicatorStyle"
        ></div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'FlexibleNav',
  props: {
    // 导航数据
    items: {
      type: Array,
      required: true,
      validator: (value) => {
        // 验证每个item至少包含label
        return value.every(item => typeof item.label === 'string');
      },
      default: () => [ { label: '精选产品', path: '#' },
      { label: '游戏行业', path: '#' },]
    },
    // 排列方向：horizontal/vertical
    direction: {
      type: String,
      default: 'vertical',
      validator: (val) => ['horizontal', 'vertical'].includes(val)
    },
    // 导航项间距 (px)
    itemSpacing: {
      type: Number,
      default: 0
    },
    // 导航项内边距 (上下 px)
    itemPaddingY: {
      type: Number,
      default: 12
    },
    // 导航项内边距 (左右 px)
    itemPaddingX: {
      type: Number,
      default: 16
    },
    // 文字颜色
    textColor: {
      type: String,
      default: '#333'
    },
    // 激活状态文字颜色
    activeColor: {
      type: String,
      default: '#42b983'
    },
    // 激活索引
    activeIndex: {
      type: Number,
      default: 0
    },
    // 是否显示激活指示器
    showIndicator: {
      type: Boolean,
      default: true
    },
    // 激活指示器颜色
    indicatorColor: {
      type: String,
      default: '#42b983'
    }
  },
  computed: {
    // 容器样式
    containerStyle() {
      return {
        width: this.direction === 'vertical' ? 'auto' : '100%'
      };
    },
    // 列表样式
    listStyle() {
      return {
        // 根据排列方向设置间距
        ...(this.direction === 'horizontal' 
          ? { marginLeft: `-${this.itemSpacing}px` }
          : { marginTop: `-${this.itemSpacing}px` })
      };
    },
    // 导航项样式
    itemStyle() {
      return {
        // 根据排列方向设置外边距
        ...(this.direction === 'horizontal'
          ? { marginLeft: `${this.itemSpacing}px` }
          : { marginTop: `${this.itemSpacing}px` }),
        padding: `${this.itemPaddingY}px ${this.itemPaddingX}px`
      };
    },
    // 文字样式
    textStyle() {
      return {
        color: this.activeIndex === this.index ? this.activeColor : this.textColor,
        textDecoration: 'none'
      };
    },
    // 指示器样式
    indicatorStyle() {
      return {
        backgroundColor: this.indicatorColor,
        // 根据排列方向设置指示器位置
        ...(this.direction === 'horizontal'
          ? { 
              width: '100%',
              height: '2px',
              bottom: 0,
              left: 0
            }
          : { 
              width: '2px',
              height: '100%',
              top: 0,
              left: 0
            })
      };
    }
  },
  methods: {
    // 处理导航项点击
    handleItemClick(index, item) {
      this.$emit('item-click', { index, item });
    }
  }
};
</script>

<style scoped>
.flexible-nav {
  box-sizing: border-box;
}

.nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  box-sizing: border-box;
}

/* 横排样式 */
.nav-list:not(.vertical) {
  flex-direction: row;
}

/* 竖排样式 */
.nav-list.vertical {
  flex-direction: column;
}

.nav-item {
  position: relative;
  cursor: pointer;
  box-sizing: border-box;
  transition: background-color 0.2s;
}

.nav-item:hover {
  background-color: rgba(0, 0, 0, 0.03);
}

.nav-item a,
.nav-item span {
  display: inline-block;
  transition: color 0.2s;
}

.active-indicator {
  position: absolute;
  transition: background-color 0.2s;
}
</style>
